<template>
	<!-- height:calc(100vh - 60px); -->
	<view v-if="lists" class="video-kling" ref="uv-back-top" style="transition: width 2s;">
		<uv-form labelPosition="left" :model="kling" :rules="rules" ref="form">
			<!-- <uv-form-item v-if="false" labelWidth="80" label="模型" prop="kling.name" borderBottom>
				<view class="kling_content"
					style="width:100% ; display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;">
					<view style="margin-right: 20px;" v-for="(item, index) in aiList[aicurrent].model" :key="index">
						
						<uv-tags v-if="item.tag.includes('kling')" :text="`${item.name}`" :plain="index != radiosval"
							type="warning" :name="index" @click="clicklist(item,index)">
						</uv-tags>
					</view>
				</view>
			</uv-form-item> -->
			<uv-form-item labelWidth="80" label="模型" prop="kling.name" borderBottom>
				<uni-data-select v-model="kling.model_name" :localdata="lists.model"></uni-data-select>
			</uv-form-item>
			<uv-form-item v-if="kling.model_name=='kling-v1-6'" labelWidth="80" label="时长" prop="kling.name"
				borderBottom>
				<uni-data-select v-model="kling.duration" :localdata="durations"></uni-data-select>
			</uv-form-item>
			<uv-form-item labelWidth="80" label="清晰度" prop="kling.mode" borderBottom>
				<uni-data-select v-model="kling.mode" :localdata="modes"></uni-data-select>
			</uv-form-item>
			<uv-form-item labelWidth="80" label="视频数量" prop="kling.enhancePrompt" borderBottom>
				<el-slider show-tooltip @change="changen" show-stops style="width: 100%;margin-right: 15px;" :step="1"
					:min="0" :max="4" v-model="n" :marks="marks">
				</el-slider>
			</uv-form-item>

			<uv-form-item labelWidth="80" label="" prop="kling.mode">
				<view style="display: flex;justify-content: space-between;width: 100%;">
					<view class="">
						图片/文字
					</view>
					<el-switch v-model="isimg" active-text="图片" inactive-text="文字">
					</el-switch>
				</view>
				<!-- <el-switch
				  v-model="isimg"
				  active-text="图片"
				  inactive-text="文字">
				</el-switch> -->
				<!-- <uv-switch  v-model="isimg" inactive-text="图片" active-text="文字"></uv-switch> -->
			</uv-form-item>

			<view v-if="isimg" style="background-color: #ddd;width: 100%;padding:0px;border-radius: 10px;">
				<uv-form-item labelWidth="80" label="开始帧图片" prop="kling.enhancePrompt" borderBottom>
					<uploads style="max-width: 200px;" :name="1" :fileList="imageUrl"
						@resdata="e=>parentMethod(e,'image')"></uploads>
				</uv-form-item>
				<uv-form-item labelWidth="80" label="结束帧图片" prop="kling.enhancePrompt" borderBottom>
					<uploads style="max-width: 200px;" :name="2" :fileList="imageEndUrl"
						@resdata="e=>parentMethod(e,'image_tail')"></uploads>
				</uv-form-item>
				<uv-form-item labelWidth="65" label="图片强度" prop="kling.enhancePrompt" borderBottom>
					<el-tooltip style="margin-left: 10px;" effect="dark" content="生成过程中对用户上传图片的参考强度, 数值越大参考强度越大"
						placement="top">
						<i style="margin-right: 3px;" class="el-icon-info"></i>
					</el-tooltip>
					<el-slider show-tooltip show-stops style="width: 100%;margin-right: 15px;" :step="0.01" :min="0"
						:max="1" v-model="kling.image_fidelity" :marks="marks">
					</el-slider>
					<!-- <uv-slider min="0" max="4" style="width: 100%;" step="1" show-value v-model="n"></uv-slider> -->
				</uv-form-item>
			</view>
			<view v-else style="background-color: #ddd;width: 100%;padding:0px;border-radius: 10px;">
				<view class="">
					视频比例
				</view>
				<uv-form-item labelWidth="" label="" prop="kling.aspect_ratio" borderBottom>
					<view class="imgrate">
						<view v-for="(item,index) in ratioSize" :key="item.text"
							:class="kling['aspect_ratio'] == item.value?'item_ss cursor-pointer item_ss_acting':'item_ss cursor-pointer'"
							@click="kling['aspect_ratio'] = item.value">
							<view style="height: 70%;display: flex;justify-content: center;align-items: center;">
								<!-- {{clacRate(item)}} -->
								<view class="item_xx" :style="[{
									width: $uv.addUnit(clacRate(item)[0]),
										height: $uv.addUnit(clacRate(item)[1])
									}]">
								</view>
							</view>
							<view class="item_text">
								{{item.text}}
							</view>
						</view>
					</view>
				</uv-form-item>
				<uv-form-item labelWidth="65" label="自由度" prop="kling.enhancePrompt" borderBottom>
					<el-tooltip style="margin-left: 10px;" effect="dark" content="自由度；值越大，模型自由度越小，与用户输入的提示词相关性越强"
						placement="top">
						<i style="margin-right: 3px;" class="el-icon-info"></i>
					</el-tooltip>
					<el-slider show-tooltip show-stops style="width: 100%;margin-right: 15px;" :step="0.01" :min="0"
						:max="1" v-model="kling.cfg_scale" :marks="marks">
					</el-slider>
					<!-- <uv-slider min="0" max="4" style="width: 100%;" step="1" show-value v-model="n"></uv-slider> -->
				</uv-form-item>
			</view>
			<view class="demo-input-suffix" style="margin-top: 10px;">
				视频创意描述：
				<el-input @focus="$emit('focus')" style="margin-top: 5px;"
					placeholder="描写图片详情,如:谁,长什么样,什么时候,在哪里,做什么,画面细节什么样" type="textarea"
					:autosize="{ minRows: 3, maxRows: 4}" v-model="kling.prompt">
				</el-input>
			</view>
			<view class="demo-input-suffix" style="margin-top: 10px;">
				不希望呈现的内容：
				<el-input @focus="$emit('focus')" style="margin-top: 5px;"
					placeholder="描写图片详情,如:谁,长什么样,什么时候,在哪里,做什么,画面细节什么样" type="textarea"
					:autosize="{ minRows: 3, maxRows: 4}" v-model="kling.negative_prompt">
				</el-input>
			</view>

			<el-link style="font-size: 12px;opacity: 0;height: 0px !important;" type="primary">{{fill}}</el-link>
			<view style="display: flex;justify-content: space-between;">
				<uv-button :disabled="disabled" style="width: 49%;" type="primary" text="提 交"
					@click="submit"></uv-button>
				<uv-button style="width: 49%;" type="error" text="清 空" @click="reset"></uv-button>
			</view>
		</uv-form>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	// 引入
	import tabbars from '@/components/tabbar/tabbar';
	import {
		task,
		index,
		taskId,
		getScroll,
		scroll,
		getName
	} from '@/common/api.js';
	import uploads from '@/components/upload/upload.vue';
	import config from '@/common/config'
	export default {
		components: {
			// 注册组件
			uploads
		},
		props: {
			lists: {
				type: [Object, Array],
			},
			minWidth: {
				type: [Number, String],
				default: 1
			},
			aside: {
				type: Boolean,
				default: false
			},
			deepColor: {
				type: String,
				default: '#4D4D4D'
			},
			shallowColor: {
				type: String,
				default: '#808080'
			},
			lightColor: {
				type: String,
				default: '#ccc'
			},
			aicurrent: {
				type: Number,
				default: 0
			},
			type: {
				type: String,
				default: 'kling'
			},
			sharevid: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				fill: config.fill,
				marks: {
					1: '',
					2: '',
					3: {
						style: {
							color: '#1989FA'
						},
						label: this.$createElement('strong', '')
					},
					4: '',
				},
				tabbarsValue: 'video',
				scrollTop: 0,
				isFirstLoad: true, // 标志变量，用于判断是否首次加载
				id: '',
				createdAt: '',
				radiosval: 0,
				textarea: "",

				isimg: false,
				disabled: false,
				ai: "video",
				n: 1,
				quality: [{
					value: 'standard',
					text: "标准"
				}, {
					value: 'hd',
					text: "增强细节"
				}],
				imageUrl: [
					// 	{
					// 	url: ""
					// },
				],
				imageEndUrl: [],
				kling: {
					model_name: 'kling-v1-6',
					aspect_ratio: "1:1",
					duration: '5s',
					cfg_scale: 0.5,
					image_fidelity: 0.5,
					mode: 'std',
					image: "",
					image_tail: "",
					prompt: '',
					negative_prompt: ''
				},
				durations: [{
					value: '5s',
					text: "5s"
				}, {
					value: '10s',
					text: '10s'
				}],
				modes: [{
					value: 'std',
					text: "标准"
				}, {
					value: 'pro',
					text: '高品质'
				}],
				range: [{
					value: 'flux1-schnell',
					text: "flux1-schnell"
				}, {
					value: 'flux1-dev',
					text: 'flux1-dev'
				}, {
					value: 'flux1-pro',
					text: "flux1-pro"
				}, {
					value: 'dall-e-3',
					text: "dall-e-3"
				}, ],
				dataLoaded: false,
				ratioSize: [{
					text: '9:16',
					value: '9:16',
				}, {
					text: '3:4',
					value: '3:4',
				}, {
					text: '1:1',
					value: '1:1',
				}, {
					text: '4:3',
					value: '4:3',
				}, {
					text: '16:9',
					value: '16:9',
				}, {
					text: '21:9',
					value: '21:9',
				}],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		watch: {
			// 监听data数据的变化
			kling: {
				handler: function(newVal, oldVal) {
					this['config_' + this.tabbarsValue][this.type] = newVal
					this.$uv.vuex('config_' + this.tabbarsValue, this['config_' + this.tabbarsValue]);
				},
				deep: true
			},
			aicurrent: {
				handler: function(newVal, oldVal) {
					this.kling['ai'] = this.lists.value;
				},
				deep: true
			},
			sharevid: {
				handler: function(newVal, oldVal) {
					this.ress(newVal);
					this.getVuex();
				},
				deep: true
			},
		},
		mounted() {
			this.tabbarsValue = this.pages();
			this.reset();
			if (this.sharevid) {
				this.ress(this.sharevid);
				this.getVuex();
			}
		},
		methods: {
			changen() {
				if (this.n < 1) {
					this.n = 1;
				}
			},
			clacRate(e) {
				let w = e.text.split(':')[0];
				let h = e.text.split(':')[1];
				if (w * 11 < 20 || h * 11 < 20) {
					w = w * 25;
					h = h * 25;
				} else if (w * 6 < 20 || h * 6 < 20) {
					w = w * 8;
					h = h * 8;
				} else if (w * 4 < 20 || h * 4 < 20) {
					w = w * 7;
					h = h * 7;
				} else if (w * 1.5 < 20 || w * 1.5 < 20) {
					w = w * 2.5;
					h = h * 2.5;
				} else {
					w = w * 2;
					h = h * 2;
				}
				return [w, h];
			},
			ress(a) {
				getName('flow', {
					custom: {
						auth: true,
						toast: false,
					},
					params: {
						id: a,
					}
				}).then(e => {
					if (e.data[0] && e.data[0].content[0]) {
						this.imageUrl = [{
							"url": 'data:image/jpeg;base64,' + e.data[0].content[0].imageUrl
						}];
						this.imageEndUrl = [{
							"url": 'data:image/jpeg;base64,' + e.data[0].content[0].imageEndUrl
						}];
						this.kling = e.data[0].content[0];
					} else {
						this.reset();
					}
				})
			},
			submit() {
				var trusd = this.isimg ? this.kling.image : this.kling.prompt;
				if (this.kling && trusd) {
					this.disabled = true;
					if (this.kling.model_name == 'kling-v1') {
						this.kling.duration = '5s'
					}
					this.$emit('focus');
					this.$emit('kling', {
						isimg: this.isimg,
						con: this.kling
					});
					var that = this;
					setTimeout(function() {
						that.disabled = false;
					}, 1500)
				} else {
					this.$refs.toast.show({
						type: 'error',
						message: this.isimg ? "图片为空！" : "创意描述为空"
					})
				}
			},
			// clicklist(ite, i) {
			// 	this.radiosval = i;
			// },
			analysis() {
				var array = ['image', 'image_tail'];
				for (var i = 0; i < array.length; i++) {
					if (this.kling[array[i]]) this[array[i]] = [{
						url: this.kling[array[i]]
					}];
				}
			},
			parentMethod(v, q) {
				this.kling[q] = v[0].baseimg;
			},
			reset() {
				this.imageUrl = [];
				this.imageEndUrl = [];
				this.kling = {
					model_name: 'kling-v1-6',
					aspect_ratio: "9:16",
					duration: '5s',
					cfg_scale: 0.5,
					image_fidelity: 0.5,
					mode: 'std',
					image: "",
					image_tail: "",
					prompt: '',
					negative_prompt: ''
				};
			},
			formatValue(val, name) {
				this.kling[name] = val / 100;
				return val / 100;
			},
			pages() {
				var pages = getCurrentPages() // 获取栈实例
				let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
				let currentPage = pages[pages.length - 1]['$page']['fullPath'] //当前页面路径(带参数)
				return currentPage.split('/')[2];
			},
			async getVuex() {
				getScroll({
					custom: {
						auth: true,
						toast: false,
					},
					params: {
						type: this.tabbarsValue,
						id: this.sharevid
					}
				}).then(e => {
					if (e.task && e.task.taskInfo) {
						this.kling = e.task.taskInfo;
					}
					if (e[0] && e[0].task && e[0].task.taskInfo) {
						this.kling = e[0].task.taskInfo;
					}
					this.analysis();
				})
			},
			async record() {
				await scroll({
					content: this['vuex_' + this.tabbarsValue],
					type: this.tabbarsValue
				}, {
					custom: {
						auth: true,
						toast: false,
					},
				})
			},
			cTime(time1, data, index) {
				if (index == 0) {
					return true;
				}
				// console.log(" ” " + Number(data.length - 1));
				if (index == Number(data.length - 1)) {
					return false;
				}
				var time2 = data[index + 1] && data[index + 1].createdAt;
				if (!time1 || !time2) {
					return false;
				}
				// console.log(time1 + " 《=》 " + time2);
				// 将时间转换为Date对象
				var date1 = new Date(time1).getTime();
				var date2 = new Date(time2).getTime();
				// 计算时间差（毫秒）
				var difference = Math.abs(date2 - date1);
				// 将时间差转换为分钟
				var minutes = Math.ceil(difference / (1000 * 60)); // 向上取整
				if (minutes > 20) {
					return true;
				} else {
					return false;
				}
			},
			times(time) {
				return " -- " + uni.$uv.timeFrom(new Date(time).getTime()) + " -- ";
			},
			routes(url) {
				this.routed('/pages' + url);
			},
			routed(url) {
				console.log('routed', url)
				uni.$uv.route({
					url: url,
					intercept(params, next) {
						console.log(params, next)
						uni.showLoading({
							title: '等待中...'
						})
						// 模拟处理等待
						setTimeout(() => {
							uni.hideLoading();
							next(true);
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "@/uni_modules/uv-ui-tools/index.scss";

	.video-kling {
		height: 100%;
		overflow: auto;

		.imgrate {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			width: 100%;

			.item_ss {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				border: 1px solid #cccccc;
				border-radius: 5px;
				width: 60px;
				height: 70px;
				color: #666666;
				margin-bottom: 10px;

				.item_xx {
					background: linear-gradient(to left, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) left top no-repeat,
						linear-gradient(to bottom, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) left top no-repeat,
						linear-gradient(to left, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) right top no-repeat,
						linear-gradient(to bottom, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) right top no-repeat,
						linear-gradient(to left, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) left bottom no-repeat,
						linear-gradient(to bottom, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) left bottom no-repeat,
						linear-gradient(to left, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) right bottom no-repeat,
						linear-gradient(to left, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) right bottom no-repeat;
					background-size: 2px 6px, 6px 2px, 2px 6px, 6px 2px;
					// background-color: #d0e2f5;
					margin-top: 0px;
					background-color: #cccccc;
					border: 1px solid #fff;
				}

				.item_text {
					height: 30%;
					padding: 2px 5px;
					bottom: 0px;
				}
			}

			.item_ss_acting {
				border: 1px solid #C6000B;

				.item_xx {
					background-color: #C6000B;
					border: 1px solid #fdff7b;
				}

				.item_text {
					color: #C6000B;
				}
			}
		}
	}

	/* 测试 */
	.view_circle0 {
		display: flex;
		justify-content: space-between;

		margin: 50upx;
		width: 200upx;
		height: 200upx;
		border-radius: 50%;
		/* inset 表示内阴影 */
		/* box-shadow: 0 3px 150upx #62d0d6 inset; */
		box-shadow: -10px 0px 50upx #7ce2c0,
			/*左边阴影*/
			0px -10px 50upx #65dee2,
			/*上边阴影*/
			10px 0px 50upx #f7dc77,
			/*右边阴影*/
			0px 10px 50upx #c84848;
		animation: turn 1s linear infinite;
	}

	/* 
		      turn : 定义的动画名称
		      1s : 动画时间
		      linear : 动画以何种运行轨迹完成一个周期
		      infinite :规定动画应该无限次播放
		     */
	@keyframes turn {
		0% {
			-webkit-transform: rotate(0deg);
		}

		25% {
			-webkit-transform: rotate(90deg);
		}

		50% {
			-webkit-transform: rotate(180deg);
		}

		75% {
			-webkit-transform: rotate(270deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
		}
	}
</style>